Migo商城2.0 后台管理页面分析及商品类目展示实现二

首页布局如下图所示

树所对应代码

菜单点击事件源码
先判断是否是叶子节点，然后再进行下面的判断

点击新增商品后，点击选择类目，弹出窗口，在窗口中显示商品类目数据
效果如图：

其中，弹出框如何做出来，找到其源码：

调用的类目选择所在js代码

还是将代码贴下的，通过下面这段代码来加载一个类目tree，判断这个tree

// 初始化选择类目组件
   initItemCat : function(data){
   	$(".selectItemCat").each(function(i,e){
   		var _ele = $(e);
   		if(data && data.cid){
   			_ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>");
   		}else{
   			_ele.after("<span style='margin-left:10px;'></span>");
   		}
   		_ele.unbind('click').click(function(){
   			$("<div>").css({padding:"5px"}).html("<ul>")
   			.window({
   				width:'500',
   			    height:"450",
   			    modal:true,
   			    closed:true,
   			    iconCls:'icon-save',
   			    title:'选择类目',
   			    onOpen : function(){
   			    	var _win = this;
   			    	$("ul",_win).tree({
   			    		url:'/rest/item/cat/list',
   			    		animate:true,
   			    		onClick : function(node){
   			    			if($(this).tree("isLeaf",node.target)){
   			    				// 填写到cid中
   			    				_ele.parent().find("[name=cid]").val(node.id);
   			    				_ele.next().text(node.text).attr("cid",node.id);
   			    				$(_win).window('close');
   			    				if(data && data.fun){
   			    					data.fun.call(this,node);
   			    				}
   			    			}
   			    		}
   			    	});
   			    },
   			    onClose : function(){
   			    	$(this).window("destroy");
   			    }
   			}).window('open');
   		});
   	});
   },

查看jquery api关于tree控件需要返回的json数据格式

从以上代码可以看出

请求的url：/item/cat/list
使用tree控件的异步机制来实现，第一次取顶层节点列表。如果节点下有子节点状态就是关闭状态，如果没有子节点就打开状态。
每个节点中包含三个属性： id：节点ID，对加载远程数据很重要。 text：显示节点文本。 state：节点状态，’open‘ 或 ‘closed‘

返回结果是json数据，是一个节点列表，每个节点包含id、text、state三个属性。

请求的参数：id（当前节点的id）

数据分析：查询的表：tb_item_cat 数据是一个树形结果的数据。parentId、isparent

再看下商品类目表结构：

后台代码实现

接着，在manage-pojo中添加依赖，因为使用的是通用mapper，需要支持jpa，要给pojo添加注解来映射数据库表

<dependency>
    <groupId>javax.persistence</groupId>
    <artifactId>persistence-api</artifactId>
    <version>1.0</version>
</dependency>

导入pojo

mapper里添加接口

 package com.migo.mapper;

import com.migo.pojo.ItemCat;
import tk.mybatis.mapper.common.Mapper;

/**
 * Author  知秋
 * Created by kauw on 2016/11/8.
 */
public interface ItemCatMapper extends Mapper<ItemCat> {
}

service实现

package com.migo.service;

import com.migo.mapper.ItemCatMapper;
import com.migo.pojo.ItemCat;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * Author  知秋
 * Created by kauw on 2016/11/8.
 */
@Service
public class ItemCatService {
    @Autowired
    private ItemCatMapper itemCatMapper;


    public List<ItemCat> getItemCatList(Long parentId) {
        ItemCat example = new ItemCat();
        example.setParentId(parentId);
        return this.itemCatMapper.select(example);
    }
}

controller实现

package com.migo.controller;

import com.migo.pojo.ItemCat;
import com.migo.service.ItemCatService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;

import java.util.List;

/**
 * Author  知秋
 * Created by kauw on 2016/11/8.
 */
@Controller
@RequestMapping("item/cat")
public class ItemCatController {
    @Autowired
    private ItemCatService itemCatService;

    /**
     * 根据父节点id查询商品类目表
     */

    @RequestMapping(method = RequestMethod.GET)
    public ResponseEntity<List<ItemCat>> getItemCatList(
            @RequestParam(value = "{d",defaultValue = "0") Long parentId
    ){

        try {
            List<ItemCat> itemcats=this.itemCatService.getItemCatList(parentId);
            if (null==itemcats&&itemcats.isEmpty()){
                //资源不存在，响应404
                return ResponseEntity.status(HttpStatus.NOT_FOUND).body(null);
            }
            return  ResponseEntity.ok(itemcats);
        } catch (Exception e) {
            e.printStackTrace();
            // 出错，响应500
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
        }
    }
}

对ItemCat
进行改造，增加扩展字段，支持EasyUItree的显示,这样就可以避免再写一个第一版中的EasyuiTreeNode类，同时也省了第一版中在service中的一系列对easyuiTreeNode的处理(这里有疑问可以参照第一版的相关代码)

package com.migo.pojo;

import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

@Table(name = "tb_item_cat")
public class ItemCat extends BasePojo {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private Long parentId;

    private String name;

    private Integer status;

    private Integer sortOrder;

    private Boolean isParent;

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public Long getParentId() {
        return parentId;
    }

    public void setParentId(Long parentId) {
        this.parentId = parentId;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getStatus() {
        return status;
    }

    public void setStatus(Integer status) {
        this.status = status;
    }

    public Integer getSortOrder() {
        return sortOrder;
    }

    public void setSortOrder(Integer sortOrder) {
        this.sortOrder = sortOrder;
    }

    public Boolean getIsParent() {
        return isParent;
    }

    public void setIsParent(Boolean isParent) {
        this.isParent = isParent;
    }
    // 扩展字段，支持EasyUItree的显示,这样就可以避免再写一个第一版中的EasyuiTreeNode类，同时也省了第一版中
    //在service中的一系列对easyuiTreeNode的处理
    public String getText() {
        return this.getName();
    }

    public String getState() {
        return this.getIsParent() ? "closed" : "open";
    }


}

运行，输入地址运行结果
出错1：地址错误，去js文件list删掉，因为现在是要彻底restful化

更改重新选择后，错误2: 405错误

原因：查api，tree控件默认是get请求修改下即可

刷新后连接显示没有结果，查后台代码，因没添加log4j日志配置文件，先写个测试用例试试手，发现是数据库密码写错了，坑。。

package test;

import com.alibaba.fastjson.JSON;
import com.migo.pojo.ItemCat;
import com.migo.service.ItemCatService;
import org.apache.log4j.Logger;
import org.junit.runner.RunWith;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;

import javax.annotation.Resource;
import java.util.List;

/**
 * Author  知秋
 * Created by kauw on 2016/11/8.
 */
@RunWith(SpringJUnit4ClassRunner.class) //表示继承了SpringJUnit4ClassRunner类
@ContextConfiguration(locations = {"classpath*:spring/*.xml"})
public class Test {
    private static Logger logger=Logger.getLogger(Test.class);
    @Resource
    private ItemCatService itemCatService;
    @org.junit.Test
    public void test1(){
        List<ItemCat> itemCatList = itemCatService.getItemCatList(0L);
        logger.info(JSON.toJSONString(itemCatList));
    }

}

问题解决：

Migo商城2.0 后台管理页面分析及商品类目展示实现 二

首页布局如下图所示

后台代码实现

Migo商城2.0 后台管理页面分析及商品类目展示实现二